<template>
  <div>
    <!-- 头部导航 -->
    <div>
      <!-- fixed:可以让头部div带固定定位样式，给组件内的   -->
      <van-nav-bar fixed>
        <!-- 左侧插槽 -->
        <template v-slot:left>
          <img src="@/assets/toutiao_logo.png" alt="" class="logo" />
        </template>
        <!-- 右侧插槽 -->
        <template #right>
          <!-- 搜索按钮 -->
          <van-icon
            name="search"
            size="0.48rem"
            color="#fff"
            @click="moveSearchPageFn"
          />
        </template>
      </van-nav-bar>
    </div>

    <!-- tab栏导航 -->
    <div class="main">
      <van-tabs v-model="channelId" animated sticky offset-top="1.2267rem">
        <van-tab
          :name="obj.id"
          :title="obj.name"
          v-for="obj in userChannelList"
          :key="obj.id"
        >
          <article-list :channelId="channelId"></article-list>
        </van-tab>
      </van-tabs>

      <!-- 管理频道图标 -->
      <van-icon
        name="plus"
        size="0.37333334rem"
        class="moreChannels"
        @click="showPopup"
      />
    </div>

    <!-- 频道管理的弹出层 -->
    <van-popup v-model="show" get-container="body" class="channel_popup">
      <ChannelEdit
        :userList="userChannelList"
        :unCheckList="unCheckChannelList"
        @addChannelEvent="addChannelFn"
        @removeChannelEvent="removeChannelFn"
        @closeEvent="closeFn"
        v-model="channelId"
      ></ChannelEdit>
    </van-popup>
  </div>
</template>

<script>
import {
  getUserChannelsAPI,
  getAllChannelsAPI,
  updateChannelAPI,
  removeTheChannelAPI
} from '@/api'
import ArticleList from './components/ArticleList.vue'
import ChannelEdit from './ChannelEdit.vue'
export default {
  data () {
    return {
      channelId: 0, // tab导航-频道激活索引(默认为0，频道刚打开就是推荐页面的数据)
      userChannelList: [], // 用户选择频道列表
      allChannelList: [], // 所有频道列表
      show: false // 控制频道管理页面的显示
    }
  },
  methods: {
    // +号点击方法
    showPopup () {
      this.show = true
    },
    // 添加频道
    async addChannelFn (channelObj) {
      this.userChannelList.push(channelObj)
      // 推荐频道不能传递
      const newArr = this.userChannelList.filter((obj) => obj.id !== 0)
      const theNewArr = newArr.map((obj, index) => {
        const newObj = { ...obj } // 浅拷贝
        delete newObj.name
        newObj.seq = index
        return newObj
      })
      // 把最新的数组发送给后台
      const res = await updateChannelAPI({
        channels: theNewArr
      })
      console.log(res)
    },
    // 删除频道
    async removeChannelFn (channelObj) {
      const index = this.userChannelList.findIndex(
        (obj) => obj.id === channelObj.id
      )
      this.userChannelList.splice(index, 1)
      const res = await removeTheChannelAPI({
        channelId: channelObj.id
      })
      console.log(res) // 删除接口返回状态码204表示无返回内容
    },
    // 关闭反馈面板弹出层
    closeFn () {
      this.show = false
    },
    // 首页-右上角放大镜点击事件-》跳转搜索页面
    moveSearchPageFn () {
      this.$router.push('/search')
    }
  },
  // 页面初始化后请求频道数据
  async created () {
    // 获取频道列表数据
    const res = await getUserChannelsAPI()
    console.log(res)
    this.userChannelList = res.data.data.channels

    // 所有频道列表
    const res2 = await getAllChannelsAPI()
    this.allChannelList = res2.data.data.channels
    console.log(res2)
  },
  components: {
    ArticleList,
    ChannelEdit
  },
  computed: {
    unCheckChannelList () {
      //  目标把所有频道数组挨个对象取出，去用户已选频道中筛选出没有的
      const newArr = this.allChannelList.filter((bigObj) => {
        const index = this.userChannelList.findIndex((smallObj) => {
          return smallObj.id === bigObj.id
        })
        // 如果找到了,则不要，没找到的说明不在用户列表中所以要
        if (index > -1) {
          return false
        } else {
          return true
        }
      })
      return newArr
    }
  }
}
</script>

<style scoped lang="less">
.logo {
  width: 100px;
  height: 30px;
}
.main {
  padding-top: 46px;
}
/* 设置 tabs 容器的样式 */
/deep/ .van-tabs__wrap {
  padding-right: 30px;
  background-color: #fff;
}

/* 设置小图标的样式 */
.moreChannels {
  position: fixed;
  top: 62px;
  right: 8px;
  z-index: 999;
}
// 参考的是浏览器窗口的百分比
.channel_popup {
  width: 100vw;
  height: 100vh;
}
</style>
